{extend name="layout/plugin_layout" /}
﻿
{block name="title"}{$plugin.title} - {$app.title}{/block}
{block name="head"}
<style>
    .stats .stat {
        border-width: 1px;
        margin-top: -1px;
        margin-bottom: -1px;
    }
</style>
{/block}
{block name="main"}
<div class="container mx-auto" id="app">
    <div class="card lg:card-side bordered shadow-lg">
        <div class="card-body overflow-auto">
            <div class="main">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">字符串</span>
                    </label>
                    <textarea v-model="set.input" class="textarea textarea-bordered  h-64"></textarea>
                </div>
                <div class="card-actions mt-4">
                    <button class="btn btn-primary flex-1" @click="calculate">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M17 13l-5 5m0 0l-5-5m5 5V6"/>
                        </svg>
                        计算
                    </button>
                    <button class="btn btn-primary flex-1" @click="reset">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
                                  clip-rule="evenodd"/>
                        </svg>
                        清空
                    </button>
                </div>
                <div class="w-full shadow stats grid-flow-row grid-cols-3 lg:grid-flow-col lg:grid-cols-none mt-4">
                    <div class="stat place-items-center place-content-center col-span-full lg:col-auto">
                        <div class="stat-title">文本总长</div>
                        <div class="stat-value">{{set.output.len}}</div>
                    </div>
                    <div class="stat place-items-center place-content-center">
                        <div class="stat-title">汉字</div>
                        <div class="stat-value">{{set.output.chinese_characters}}</div>
                    </div>
                    <div class="stat place-items-center place-content-center">
                        <div class="stat-title">字母</div>
                        <div class="stat-value">{{set.output.letter}}</div>
                    </div>
                    <div class="stat place-items-center place-content-center">
                        <div class="stat-title">数字</div>
                        <div class="stat-value">{{set.output.number}}</div>
                    </div>
                    <div class="stat place-items-center place-content-center">
                        <div class="stat-title">空格</div>
                        <div class="stat-value">{{set.output.space}}</div>
                    </div>
                    <div class="stat place-items-center place-content-center">
                        <div class="stat-title">半角</div>
                        <div class="stat-value">{{set.output.half}}</div>
                    </div>
                    <div class="stat place-items-center place-content-center">
                        <div class="stat-title">全角</div>
                        <div class="stat-value">{{set.output.full}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            set: {
                input: 'Hi:你好！ 猜猜我有多长？',
                output: {
                    len: 0,
                    chinese_characters: 0,
                    letter: 0,
                    number: 0,
                    space: 0,
                    half: 0,
                    full: 0,
                },
            },
        },
        watch: {
            'set.input'(){
                this.calculate()
            }
        },
        created(){
            this.calculate()
        },
        methods: {
            calculate() {
                try {
                    this.set.output = {
                        len: this.set.input.length,
                        chinese_characters: this.cal(/[\u4e00-\u9fa5]/g),
                        letter: this.cal(/[a-zA-Z]/g),
                        number: this.cal(/[0-9]/g),
                        space: this.cal(/(\u00A0|\u0020|\u3000)/g),
                        half: this.cal(/[\u0000-\u00ff]/g),
                        full: this.cal(/[\uff00-\uffff]/g),
                    }
                } catch (e) {
                    $message.error(e.message)
                }
            },
            reset() {
                this.set.input = ''
                this.set.output = ''

            },
            cal(i) {
                let match = this.set.input.match(i);
                return match == null ? 0 : match.length
            }
        },
    })

</script>

{/block}